<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <title>用户登录</title>
  <link rel="stylesheet" href="Jeff/css/common.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

  <style>
    * {
      margin: 1px;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background:  no-repeat center;
      padding-top: 25px;
    }
    .rg_layout {
      width: 670px;
      height: 500px;
      border-radius: 4px;

      margin: auto;
    }
    .rg_left {
      float: left;
      margin-left: 25px;
      margin-top: 25px;
    }
    .rg_left>p:first-child {
      color: #ff9a26;
      font-size: 25px;
    }
    .rg_left>p:last-child {
      color: rgba(166, 166, 166, 0.82);
      font-size: 25px;
    }
    .rg_center {
      float: left;
      margin-top: 30px;
    }
  /*  .rg_right {

      float: right;
      margin: 15px;
    }*/

    .rg_right>p:first-child {
      font-size: 15px;

    }

    .rg_right p a {
      color: rgb(97, 57, 221);
    }

    .td_left {
      width: 100px;
      text-align: right;
      height: 45px;
    }

    .td_right {
      padding-left: 50px;
    }
    #btn_sub {
      width: 150px;
      height: 40px;
      border-radius: 4px;
      margin-top: 10px;
      background-color: #FFD026;
      border: 1px solid #FFD026;
    }
    #td_sub {
      padding-left: 150px;
    }
    .error {
      color: red;
      vertical-align: middle;
      font-size: 1px;
    }
    body {
      position: fixed;
      top: 206px;
      left: 86px;
      width: 80%;
      height: 80%;
      min-width: 1438px;

      background-color: #fff;
      background: url(https://img.dowebok.com/8457.png);
      -o-background-size: cover;
    }

    button{

      background:#F0F0F0 repeat-x;
      padding-top:3px;
      border-top:1px solid #708090;
      border-right:1px solid #708090;
      border-bottom:1px solid #708090;
      border-left:1px solid #708090;
      width:80px;
      height:auto;
      font-size:10pt;
      cursor:hand;
      background: rgb(66, 184, 221); /* this is a light blue */
    }
  </style>

  <script>
    $(function () {
      var errMsg;
      $.each($("input"), function (i, val) {
        $(val).blur(function () {
          if ($(val).attr("name") == "uname") {
            $(".userMsg").remove();
            var uname = val.value;
            var regName = /[\u4e00-\u9fa5]{2,6}/
            if (uname == "" || uname.trim() == "") {
              errMsg = "<span  class='userMsg' style='color:red;'>昵称不能为空</span>";
            } else if (!regName.test(uname)) {
              errMsg = "<span class='userMsg' style='color:red;'>由2-6个汉字组成</span>";
            } else {
              errMsg = "<span  class='userMsg' style='color:red;'>√</span>";
            }
            $(this).parent().append(errMsg);
          } else if ($(val).attr("name") == "pwd") {
            $(".pwdMsg").remove();
            var pwd = val.value;
            var regPwd = /^\w{4,10}$/;
            if (pwd == "" || pwd.trim() == "") {
              errMsg = "<span id='pwdMsg' class='pwdMsg' style='color:red;'>密码不能为空</span>";
            } else if (!regpwd.test(pwd)) {
              errMsg = "<span class='pwdMsg' style='color:red;'>格式错误</span>";
            } else {
              errMsg = "<span class='pwdMsg' style='color:red;'>√</span>";
            }
            $(this).parent().append(errMsg);
          } else if ($(val).attr("name") == "password") {
            $(".passwordMsg").remove();
            var password = val.value;
            var pwd = $("input")[3].value;
            if (password == "" || password.trim() == "" || !password.equals(pwd)) {
              errMsg = "<span class='passwordMsg' style='color:red;'>两次输入密码不一致</span>";
            } else {
              errMsg = "<span class='passwordMsg' style='color:red;'>√</span>";
            }
            $(this).parent().append(errMsg);
          } else if ($(val).attr("name") == "phonenumber") {
            $(".phonenumberMsg").remove();
            var phonenumber = val.value;
            var regphonenumber = /[13,15,18]\d{9}/;
            if (phonenumber == "" || phonenumber.trim() == "") {
              errMsg = "<span class = 'phonenumberMsg' style = 'color:red;' > 手机号不能为空 "
            } else if (!regphonenumber.test(phonenumber)) {
              errMsg = "<span class = 'phonenumberMsg' style = 'color:red;' > 格式错误 "
            } else {
              errMsg = "<span class = 'phonenumberMsg' style = 'color:red;' > √ "
            }
            $(this).parent().append(errMsg);
          }
        });
      });
    });

  </script>
</head>
<body>

<div class="rg_layout">
  <!--    页面左部分-->
  <div class="rg_left">
    <p>用户注册</p>
  </div>
  <!--页面中间部分-->
  <div class="rg_center">
    <!--/*@thymesVar id="a" type=""*/-->
    <h3 th:text="${a}">请按照指示输入</h3>
    <div class="rg_form ">
      <!--定义表单 form-->
      <form action="/user/addUser" id="form" method="post">
        <table>
          <!--  用户名-->
          <tr>
            <td class="td_left"><label >用户名</label></td>
            <td class="td_right">
              <input type="text" name="uname" id="uname" placeholder="设置用户名">
              <span id="s_username" class="error"></span>
            </td>

          </tr>
          <!--   密码-->

          <tr>
            <td class="td_left"><label >密码</label></td>
            <td class="td_right">
              <input type="password" name="pwd" id="pwd" placeholder="请输入密码">
              <span id="user_pMsg" class="error"></span>
            </td>
          </tr>

          <!--确认 密码-->
          <tr>
            <td class="td_left"><label >确认密码</label></td>
            <td class="td_right">
              <input type="password" name="user_rp" id="user_rp" placeholder="请确认密码">
              <span id="user_rpMsg" class="error"></span>
            </td>
          </tr>

          <!--手机号-->
          <tr>
            <td class="td_left"><label >手机号</label></td>
            <td class="td_right">
              <input type="text" name="phonenumber" id="phonenumber" placeholder="请输入手机号">
              <span id="s_tel" class="error"></span>
            </td>
          </tr>

          <!--注册按钮-->
          <tr>
            <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册">
             </td>
          </tr>
        </table>
      </form>
    </div>
  </div>
  <!--页面右部分-->

</div>
</body>
</html>